<template>
	<div class="zk-group-report" :style="'height:'+bodyHeight+'px;'">
		<div class="group-report_cot">
			<div class="group-report_left" v-loading="reportLoading">
				<div class="group-report_ipt" v-if="false">
					<el-input v-model="inputValue" class="group-report_vto" placeholder="请输入搜索内容" @input="inputChang"></el-input>
				</div>
				<div class="group-report_ul">
					<div class="group-report_t1" @click="groupTab(tItem,tIndex)" :class="currentIndex==tIndex?'group-report_active':''" v-for="(tItem,tIndex) in tabLeft" :key="tIndex">
						<i class="icon-5333-neneifen"></i>
						<div class="group-report_t2">{{tItem.title}}</div>
						<div class="group-report_t3">
							<div class="group-report_crtile" :class="{'group-report_vture':tItem.isRun===true}"></div>
						</div>
					</div>
				</div>
				<div class="group-report_pagin">
					<el-pagination @current-change="sizeChange" layout="prev, pager, next" :pager-count="5" :page-size="searchModel.pageSize" :total="searchModel.recordCount"></el-pagination>
				</div>
			</div>
			<div class="group-report_right" v-if="async">
				<x-border icon="null" :class="{'group-report_border':viewModel.isRun}">
					<div slot="headerLeftBut" class="group-report_buts" @click="butSubmit">{{viewModel.isRun?'停止交易':'开始交易'}}</div>
					<div style="padding: 20px 20px 10px 20px;" v-loading="loading">
						<count-report v-model="viewModel" ref="countReport"></count-report>
					</div>
					<div class="group-report_fulltab" slot="headerRight" v-if="tabsList">
						<div class="box-cotel">
							<el-tabs v-model="activeName" :class="{'group-report_tabs':viewModel.isRun}">
								<el-tab-pane v-for="(tItem,tIndex) in tabsList" :key="tIndex" :name="tItem.value">
									<span slot="label">
										<span @click="handleClick(tItem)" style="height: 100%; display:inline-block;"> {{tItem.value}}</span>
									</span>
								</el-tab-pane>
							</el-tabs>
						</div>
						<img src="https://data.5ug.com/wwwroot/uploads/api/736-973-158/2021-09-19/6146cdf8771ab3b7b660d4b8.png" class="box-fullScreen" @click="fullScreenChang" />
					</div>
					<div class="group-report_cul">
						<div class="group-report_cli" v-for="(kItem,kIndex) in viewModel.values" :key="kIndex">{{kItem.key}}：{{kItem.value}}</div>
					</div>
				</x-border>
				<x-border :border="autoModel.border">
					<zk-auto-form :serviceConfig="autoModel"></zk-auto-form>
				</x-border>
				<x-border :border="{title: '交易记录'}">
					<x-table type="NymOrderStrategyTable"></x-table>
				</x-border>
			</div>
		</div>
		<el-dialog title="预览" :visible.sync="fullScreen" :fullscreen="true">
			<x-border v-if="viewModel" :title="viewModel.title" :class="{'group-report_border':viewModel.isRun}">
				<div slot="headerLeftBut" class="group-report_buts" @click="butSubmit">{{viewModel.isRun?'停止交易':'开始交易'}}</div>
				<div style="padding: 20px;" v-loading="loading">
					<count-report v-model="viewModel" ref="countReport"></count-report>
				</div>
				<div slot="headerRight" v-if="tabsList">
					<el-tabs v-model="activeName" :class="{'group-report_tabs':viewModel.isRun}">
						<el-tab-pane v-for="(tItem,tIndex) in tabsList" :key="tIndex" :name="tItem.value">
							<span slot="label">
								<span @click="handleClick(tItem)" style="height: 100%; display:inline-block;"> {{tItem.value}}</span>
							</span>
						</el-tab-pane>
					</el-tabs>
				</div>
			</x-border>
		</el-dialog>
	</div>
</template>

<script>
	import api from 'api'
	import actions from './actions'
	import countReport from './styles/count-report'
	export default {
		components: {
			countReport
		},
		props: {
			widget: {}
		},
		data() {
			return {
				reportLoading: true,
				loading: false,
				viewModel: {},
				widgetModel: null,
				tabsList: [],
				activeName: 'noLimit',
				tabLeft: [],
				searchModel: [],
				currentIndex: 0,
				async: false,
				inputValue: '',
				bodyHeight: 0,
				paraObj: {
					id: '',
					way: '',
					type: ''
				},
				autoModel: [],
				fullScreen: false
			}
		},
		created() {
			this.bodyHeight = window.document.body.clientHeight - 50
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				this.autoModel = await this.$ala.httpGet('api/Auto/Form', {
					type: 'NymOrderStrategyForm'
				})
				this.tabsList = await this.$ala.httpGet('api/type/GetKeyValue?type=StrategyReportType')
				this.activeName = this.tabsList[0].value
				this.leftInit(1).then(() => {
					this.paraObj = {
						id: this.tabLeft[0].id,
						way: this.tabLeft[0].way
					}
					this.rightInit(this.paraObj)
					this.reportLoading = false
				})
			},
			async leftInit(vIndex) {
				var tabArray = await this.$ala.httpGet('Api/NymStrategy/Keys', {
					pageIndex: vIndex
				})
				this.tabLeft = tabArray.result
				this.searchModel = tabArray
			},
			sizeChange(e) {
				this.currentIndex = 0
				this.tabLeft = []
				this.leftInit(e)
			},
			butSubmit() {
				var this_ = this
				var text = this_.viewModel.isRun ? '停止交易' : '开始交易'
				this.$confirm('确认执行' + text + '操作？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					var repones = await this_.$ala.httpPost('Api/NymStrategy/Run', this_.paraObj)
				}).catch(() => {

				})
			},
			groupTab(gValue, gIndex) {
				this.paraObj = {
					id: gValue.id,
					way: gValue.way
				}
				this.currentIndex = gIndex
				this.rightInit(this.paraObj)
			},
			async rightInit(vPara) {
				this.viewModel = {}
				this.loading = true
				var repones = await this.$ala.httpGet('Api/NymStrategy/Report', vPara)
				this.viewModel = repones
				setTimeout(() => {
					this.loading = false
					this.async = true
				}, 1000)
			},
			fullScreenChang() {
				this.fullScreen = !this.fullScreen
			},
			inputChang() {
				var this_ = this
				var searchArray = []
				if (this.inputValue) {
					this.searchModel.forEach(res => {
						if (String(res.value).indexOf(String(this_.inputValue)) > -1) {
							searchArray.push(res)
						}
					})
					this.tabLeft = searchArray
				} else {
					this.tabLeft = this.searchModel
				}
			},
			async handleClick(ev) {
				this.paraObj.type = ev.key
				this.rightInit(this.paraObj)
			}
		}
	}
</script>

<style lang="scss">
	@import "./var.scss";
</style>